<template>
	<view>
		<nav-bar   backState="2000" fontColor="#FFFFFF" title="云仓移动终端">
			<view slot="left" style="display: flex;">
				<image src="../../static/icon/iconIndex/user.png"
					style="width: 50rpx;height: 50rpx;margin-left: 25upx;"></image>
				<span
					style="font-size: 30rpx;margin-left: 5rpx;color: #FFFFFF;font-weight: 700;margin-top: 5rpx;">{{userName}}</span>
			</view>
			<view slot="right" @click="showDrawer">
				<image src="../../static/icon/iconIndex/config.png"
					style="width: 50rpx;height: 50rpx;margin-right: 25upx;"></image>
			</view>
		</nav-bar>
		<!-- <image style="width:70%;height: 300rpx;margin: 0 auto;margin-top: 30rpx;" src="../../static/img/chahua1.png"> -->
		</image>
		
		<view class="contentBox">
			<view class="contentBox1" @click="orderPick">
				<image class="img" src="../../static/icon/iconIndex/jianhuo.png"></image>
				<view class="title">拣货</view>
				<view class="colorBar"></view>
			</view>
			<view class="contentBox1" @click="putaway">
				<image class="img" src="../../static/icon/iconIndex/shangjia_1.png"></image>
				<view class="title">上架</view>
			</view>
			
			<view class="colorLongBar"></view>
		</view>
		<view class="contentBox">
			
			<view class="contentBox1" @click="grapOrder">
				<image class="img" src="../../static/icon/iconIndex/grab-order.png"></image>
				<view class="title">抢单</view>
			</view>
			<view class="colorLongBar"></view>
		</view>
		<uni-drawer ref="showRight" mode="left" :mask-click="true">
			<!-- <scroll-view style="height: 100%;" scroll-y="true">
				<button @click="closeDrawer" type="primary">关闭Drawer</button>
				<view v-for="item in 60" :key="item">可滚动内容 {{ item }}</view>
			</scroll-view> -->
			<view class="drawer">
				<view class="titleOne">
					云仓
				</view>
				<view class="titleTwo">
					
				</view>
				<view class="titleTwo">
					移动终端
				</view>
			</view>
			<view @click="sysUser"
				style="height: 100rpx;width: 85%;border-bottom: 1px solid #3B5DE0;margin: 0 auto;display: flex;">
				<view style="font-size: 32rpx;align-self: center;margin: 0 auto;">用户管理</view>
				<view style="float: right;align-self: center;font-size: 32rpx;">></view>
			</view>
			<view style="height: 100rpx;width: 85%;border-bottom: 1px solid #3B5DE0;margin: 0 auto;">
				<view style="text-align: center;font-size: 32rpx;line-height: 100rpx;">版本号：{{version}}</view>
			</view>

			<view @click="logout" style="position: fixed;bottom: 10rpx;width: 100%;">
				<button type="primary" style="width: 90%;margin: 0 auto;background: #3B5DE0;">退出</button>
			</view>
		</uni-drawer>
	</view>
</template>
<!--  -->
<script>
	export default {
		data() {
			return {
				userName: '',
				version: ''
			}
		},
		onLoad() {
			let str = 'AA010101123'
			let code1 = str.slice(0,2)
			let code2 = str.slice(2,4)
			let code3 = str.slice(4,6)
			let code4 = str.slice(6,8)
			console.log(code1+'-'+code2+'-'+code3+'-'+code4)
			this.version = plus.runtime.version
			uni.hideTabBar()
		},
		onShow() {
			this.userName = uni.getStorageSync('userInfo').nickName
			console.log(uni.getStorageSync('userInfo'))
		},
		methods: {
			showDrawer() {
				this.$refs.showRight.open();
			},
			closeDrawer() {
				this.$refs.showRight.close();
			},
			logout() {
				uni.removeStorageSync('token')
				uni.removeStorageSync('userInfo')
				uni.removeStorageSync('shangjia')
				uni.removeStorageSync('jieyong')
				uni.removeStorageSync('guihuan')
				uni.removeStorageSync('lingqu')
				uni.removeStorageSync('chuzhi')
				uni.removeStorageSync('biangeng')
				this.$refs.showRight.close();
				uni.navigateTo({
					url: '../login/login'
				})
			},
			chaxun() { //查询
				uni.navigateTo({
					url: '../event/search'
				});
			},
			grapOrder(){
				uni.navigateTo({
					url: '../grap-order/grap-order'
				});
			},
			putaway(){
				uni.navigateTo({
					url: '../putaway/putaway'
				});
			},
			orderPick(){
				uni.navigateTo({
					url: '../order-pick/order-pick'
				});
			},
			bindCard() { 
				uni.navigateTo({
					url: '../event/bindCardList'
				});
			},
			shippingOrder(){
				uni.navigateTo({
					url: '../shipping-order/shipping-order'
				});
			},
			inventoryCheck(){
				uni.navigateTo({
					url: '../inventory-view/inventory-view'
				});
			},
			chuku() { 
				uni.navigateTo({
					url: '../receive/receive'
				});
			},
			pandian() { //盘点
				uni.navigateTo({
					url: '../event/take_stock'
				});
			},
			shangjia() { //登记存放地---也就是上架
				uni.navigateTo({
					url: '../shipments/shipments'
				});
			},
			change() {
				uni.navigateTo({
					url: '../event/changeShelf'
				});
			},
			
			unBind() {
				uni.navigateTo({
					url: '../event/uploadFile'
				});
			},
			sysUser() {
				uni.navigateTo({
					url: '../user/menu'
				});
			}
		}
	}
</script>

<style scoped>
	page {
		background: #ffff;
	}

	.contentBox {
		position: relative;
		width: 100%;
		height: 250rpx;
		display: flex;
		/* border-bottom: 1px solid #3B5DE0; */
	}

	.contentBox1 {
		width: 50%;
		height: 250rpx;
		/* border: 1px solid #efefef; */
		position: relative;
	}

	.img {
		position: absolute;
		height: 100rpx;
		width: 100rpx;
		top: 40%;
		left: 50%;
		margin: -50rpx 0 0 -50rpx;
	}

	.colorBar {
		position: absolute;
		height: 130rpx;
		width: 5rpx;
		top: 50%;
		left: 112%;
		background-image: linear-gradient(#ffffff, #3B5DE0, #ffffff);
		margin: -50rpx 0 0 -50rpx;
	}

	.title {
		color: #000000;
		font-size: 28rpx;
		letter-spacing: 3rpx;
		text-align: center;
		margin-top: 48%;
	}

	.colorLongBar {
		position: absolute;
		height: 5rpx;
		width: 90%;
		top: 105%;
		left: 5%;
		background-image: linear-gradient(to right, #ffffff, #3B5DE0, #ffffff);

	}

	.drawer {
		width: 100%;
		height: 250rpx;
		background: #3B5DE0;

	}

	.titleOne {
		color: #FFFFFF;
		font-size: 32rpx;
		letter-spacing: 5rpx;
		text-align: center;
		font-weight: 700;
		padding-top: 70rpx;
	}

	.titleTwo {
		color: #FFFFFF;
		font-size: 32rpx;
		letter-spacing: 5rpx;
		text-align: center;
		font-weight: 700;
		margin-top: 25rpx;
	}

	.popup {
		width: 100%;

		view {
			font-size: 45upx;
			text-align: center;
			color: #fff;
			margin-bottom: 60upx;
		}

		image {
			display: block;
			margin: 0 auto;
		}
	}
</style>
